<template>
  <div class="app-container">
    <!--工具栏-->
    <div class="head-container">
      <div v-if="showSearch">
        <!-- 搜索 -->
        <el-input
          v-model="query.procDefName"
          clearable
          placeholder="流程名称"
          prefix-icon="el-icon-search"
          style="width: 185px;"
          class="filter-item"
          @keyup.enter.native="crud.toQuery"
        />
        <rrOperation />
      </div>

      <el-table
        ref="table"
        v-loading="crud.loading"
        stripe
        height="calc(100vh - 260px)"
        :data="crud.data"
        style="width: 100%;"
        @selection-change="crud.selectionChangeHandler"
      >
        <!--        <el-table-column type="selection" width="55" align="center" />-->
        <el-table-column label="任务编号" align="center" prop="taskId" :show-overflow-tooltip="true" />
        <el-table-column label="流程名称" align="center" prop="procDefName" />
        <el-table-column label="任务节点" align="center" prop="taskName" />
        <el-table-column label="流程版本" align="center">
          <template slot-scope="scope">
            <el-tag size="medium">v{{ scope.row.procDefVersion }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="流程发起人" align="center">
          <template slot-scope="scope">
            <label>{{ scope.row.startUserName }}
              <el-tag type="info" size="mini">{{ scope.row.startDeptName }}</el-tag>
            </label>
          </template>
        </el-table-column>
        <el-table-column label="接收时间" align="center" prop="createTime" width="180" />
        <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="text"
              icon="el-icon-edit-outline"
              @click="handleProcess(scope.row)"
            >处理
            </el-button>
            <el-button
              v-if="checkPer(['admin'])"
              size="mini"
              type="text"
              icon="el-icon-user-solid"
              @click="handleAssign(scope.row)"
            >指派
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <!--分页组件-->
      <pagination />
    </div>
    <!--选择指派人-->
    <el-dialog :title="assignTitle" :visible.sync="assignOpen"append-to-body>
      <el-form label-width="80px">
        <el-form-item prop="targetKey">
          <selectUser @setSelectEvent="handleSelect" />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="assignOpen = false">取 消</el-button>
        <el-button type="primary" @click="taskAssign">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { crudTodo, assignTask } from '@/api/flowable/todo'
import CRUD, { presenter, header, crud } from '@brotherCrud/crud'
import Editor from '@/components/Editor'
import Parser from '@/components/parser/Parser'
import pagination from '@brotherCrud/Pagination'
import rrOperation from '@brotherCrud/RR.operation'
import selectUser from '@/views/components/selectUser'

export default {
  name: 'Deploy',
  components: { pagination, Parser, Editor, rrOperation, selectUser },
  mixins: [presenter(), header(), crud()],
  cruds() {
    return CRUD({
      title: '流程表单',
      url: '/api/flowable/task/todoList',
      crudMethod: { ...crudTodo }
    })
  },
  data() {
    return {
      assignTitle: '指派任务',
      assignOpen: false,
      // 显示搜索条件
      showSearch: true,
      assignee: '',
      taskId: ''
    }
  },
  created() {
  },
  methods: {
    // 跳转到处理页面
    handleProcess(row) {
      this.$router.push({
        // name: 'Record',
        path: '/flowable/task/record/index',
        query: {
          procInsId: row.procInsId,
          deployId: row.deployId,
          taskId: row.taskId
        }
      })
    },
    // 指派处理人
    handleAssign(row) {
      this.taskId = row.taskId
      this.assignOpen = true
    },
    /** 流程变量赋值 */
    handleSelect(val) {
      // console.log(val)
      if (val instanceof Array) {
        if (val.length === 1) {
          this.assignee = val[0]
        } else if (val.length !== 0) {
          this.assignee = ''
          this.$message.warning('请选择一位指派人！')
        }
      } else {
        this.$message.warning('非法操作！')
      }
    },
    taskAssign() {
      if (this.assignee !== '') {
        assignTask({ 'assignee': this.assignee, 'taskId': this.taskId }).then(response => {
          this.$message.success(response.msg)
        }).catch(res => {
          this.$message.error('指派失败')
        })
        this.assignOpen = false
      } else {
        this.$message.warning('请选择一位指派人！')
      }
    }
  }
}
</script>

